<template>
<div class="content-wrapper">
<section class="content-header">
      <h1>
       我的收藏
      </h1>
</section>
<section class="content">
</br>
<el-table
    :data="tableData5"
    :default-sort = "{prop: 'date', order: 'descending'}"
    border
    style="width:85%;background-color:#ECF0F5;margin:auto">
    <el-table-column type="expand">
      <template scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="名称">
            <span>{{ props.row.name }}</span>
          </el-form-item>
          <el-form-item label="类别">
            <span>{{ props.row.type }}</span>
          </el-form-item>
          <el-form-item label="ID">
            <span>{{ props.row.id }}</span>
          </el-form-item>
          <el-form-item label="技术领域">
            <span>{{ props.row.tech }}</span>
          </el-form-item>
          <el-form-item label="专利数">
            <span>{{ props.row.patentNum }}</span>
          </el-form-item>
          <el-form-item label="论文数">
            <span>{{ props.row.paperNum }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label="添加时间"
      sortable
      width="200px"
      prop="date">
    </el-table-column>
    <el-table-column
      label="名称"
      width="280px"
      prop="name">
    </el-table-column>
     <el-table-column
      label="技术方向"
      width="280px"
      prop="tech">
    </el-table-column>
     <el-table-column
      prop="type"
      width= "100px"
      label="类别"
      :filters="[{ text: '人员', value: '人员' }, { text: '机构', value: '机构' }]"
      :filter-method="filterTag"
      filter-placement="bottom">
    </el-table-column>
     <el-table-column
      label="操作"
      width="110px">
      <template scope="scope">
      <el-button
          size="small"
          type="text"
          style="color:light-blue"
          @click="handleEdit(scope.row.id, scope.row)">详情</el-button>
        <el-button
          @click.native.prevent="deleteRow(scope.row.id, tableData5)"
          type="text"
          style="color:red"
          size="small">
          移除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  </section>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </br>
  </div>
</template>

<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>

<script>


  export default {
    data() {
      return {
        tableData5: [{
          date: '2017-05-02',
          id: '4354',
          name: '王大哥',
          tech:'大数据',
          patentNum:'3',
          paperNum:"2",
          type: '人员'
        }, {
          date: '2017-05-03',
          id: '12343',
          name: '王二哥',
          tech:'人工智能',
          patentNum:'2',
          paperNum:"2",
          type: '人员'
        }, {
          date: '2017-05-05',
          id: '2531',
          name: '王三哥',
          tech:'数据挖掘',
          patentNum:'4',
          paperNum:"2",
          type: '人员'
        }, {
          date: '2017-05-05',
          id: '2531',
          name: '王四哥',
          tech:'人脸识别',
          patentNum:'4',
          paperNum:"2",
          type: '人员'
        },{
          date: '2017-05-07',
          id: '11245',
          name: '隔壁老王家',
          tech:'数据挖掘',
          patentNum:'4',
          paperNum:"2",
          type: '机构'
        }]
      }
    },
     methods: {
      filterTag(value, row) {
        return row.type === value;
      },
      deleteRow(id, rows) {
      var i;
      for(i in rows){
       if(rows[i].id===id){
       rows.splice(i,1);
       }
      }
      }
    }
  }
</script>
